<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
<style>
body{
	margin:0;
	padding:10px;
	background:#333 url(bg.jpg);
	-webkit-user-select: none;
}
#toptitle{
	color:#DDD;
	text-shadow: 1px 1px 1px #000;
	font:50px 'Yanone Kaffeesatz', arial, serif;
	position:fixed;
	top:0;
	right:0;
	line-height:50px;
	margin:0;
	padding:10px;
}
#menu{
	width:400px;
	text-align:center;
	list-style: none;
	padding:0;
	margin:0;
	color:#FFF;
	font:2em calibri,"Trebuchet MS", Helvetica, sans-serif;
	text-shadow:0 0 10px rgba(255,255,255,.2), 2px 2px 3px rgba(0,0,0,.3);
}

#menu li{
	padding:8px;
	-webkit-transition: all 250ms ease-out;
	-webkit-transform: scale(1);
	opacity: 0.6;
}
#selected{
	-webkit-transition: 250ms ease-out !important;
	-webkit-transform: scale(3) rotate(0) !important;
	opacity: 1 !important;
	text-shadow:0 0 25px rgba(255,255,255,.8), 1px 1px 2px rgba(0,0,0,.75) !important;
}
#prev,#selected + li{
	-webkit-transition: all 250ms ease-out!important;
	-webkit-transform: scale(1.5)!important;
    opacity: 0.8!important;
}

</style>
</head>

<body>
<h1 id="toptitle">.mediaTV</h1>
<ul id="menu">
	<li>Musica</li>
    <li>Fotos</li>
    <li id="prev">Peliculas</li>
    <li id="selected">Videos</li>
    <li>Vacio</li>
    <li>Prueba</li>
    <li>Test</li>
    <li>Demos</li>
    <li>Opciones</li>
    
</ul>
<script type="text/javascript">
document.body.addEventListener("keydown",Keyfn,false);       

function Keyfn(event)
{
   switch(event.keyCode)
   {
      case 38:
	  	var t = document.getElementById("selected");
	  	if(t.previousElementSibling != null)
		{
			t.id = null;
			t = document.getElementById("prev");
			t.id = "selected";
			t = t.previousElementSibling;
			if(t != null) t.id = "prev";
		}
      break;

      case 39:
      document.Form1.KeyName.value = "Arrow Right";
      break;

      case 40:
      	var t = document.getElementById("selected");
	  	if(t.nextElementSibling != null)
		{
			if(t.previousElementSibling != null) t.previousElementSibling.id = null;
			t.id = "prev";
			t = t.nextElementSibling;
			t.id = "selected";
		}
      break;
   }

}
</script>
</body>
</html>